<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>考勤打卡系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" th:href="@{/static/css/app.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">考勤打卡系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="javascript:" id="startWork">上班打卡</a></li>
            <li class="layui-nav-item"><a href="javascript:" id="endWork">下班打卡</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:" id="loginOut">退了</a></li>
        </ul>
    </div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title"
							   th:value="${userName}"
                               id="user-name"
                               autocomplete="off" placeholder="请输入完整用户名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">打卡月份</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
                    </div>
                </div>
				<div class="layui-inline">
					<button class="layui-btn" id="search-btn" type="button">搜索</button>
				</div>

            </div>


        </div>
        <div class="work-data-tb">
            <ul id="work-list">
            </ul>
        </div>
        <div class="remark-box">

        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        考勤打卡系统
    </div>
</div>
<script src="layui/layui.all.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'laydate'], function () {
        var element = layui.element;
        var form = layui.form
            , layer = layui.layer;
        var table = layui.table;
        var laydate = layui.laydate;
		var date=new Date;
		var year=date.getFullYear();
		var month=date.getMonth()+1;
		month =(month<10 ? "0"+month:month);
		var curYearMonth = (year.toString()+"-"+month.toString());
        var queryMonth=curYearMonth;
        laydate.render({
            elem: '#test3',
			value:curYearMonth
            , type: 'month',
            done: function(value, date){
                queryMonth=value;
            }
        });

        $ = layui.jquery;




        $("#loginOut").on('click', function () {
            location.href = "/loginOut"
        });

        $("#startWork").on('click', function () {
            layer.open({
                type: 2,
                shade: false,
                fixed: true,
                shade: 0.5,
                title: '上班打卡',
                moveType: 1,
                move: false,
                skin: 'layui-layer-rim', //加上边框
                area: ['350px', '250px'], //宽高
                content: '/work/toStart',
                // zIndex: layer.zIndex, //重点1
            });
        });


        $("#endWork").on('click', function () {
            layer.open({
                type: 2,
                shade: false,
                fixed: true,
                shade: 0.5,
                title: '下班打卡',
                moveType: 1,
                move: false,
                skin: 'layui-layer-rim', //加上边框
                area: ['350px', '250px'], //宽高
                content: '/work/toEnd',
                // zIndex: layer.zIndex, //重点1
            });
        });

        $("#search-btn").on('click', function () {
            $.ajax({
                type: 'POST',
                url: '/work/list',
                data: {
                    userName:$('#user-name').val(),
                    yearMonth:queryMonth
                },
                success: function (data) {
                        let arr=data.data;
                        $("#work-list").empty();
                    $("#work-list").append("<hr/>");
                    console.log(arr);
                    if (arr.length==0){
                        $("#work-list").append("<li>无记录</li>");
                    }
                    for (let i = 0; i <arr.length ; i++) {
                        let arrItem=arr[i].split(",");
                        console.log(arr[i].split(","));
                        let startHtml='';
                        let endHtml='';
                        if (arrItem[1].length>0){
                            startHtml='<span class="item1">'+arrItem[1]+'</span>';
                        }else {
                            startHtml='<span class="item1" style="color: red">未打上班卡</span>';
                        }
                        if (arrItem[2].length>0){
                            endHtml='<span class="item1">'+arrItem[2]+'</span>';
                        }else {
                            endHtml='<span class="item1" style="color: red">未打下班卡</span>';
                        }
                        let liHtml="<li><span class='item1'>"+arrItem[0]+"</span>" +
                            startHtml +
                            endHtml +
                            "</li>";
                        $("#work-list").append(liHtml);
                        $("#work-list").append("<hr/>");
                    }
                },
            });

        });

    });
</script>
</body>
</html>